<template>
  <div>
    <Menu mode="horizontal" :theme="theme1" active-name="main">
      <router-link to="/"><MenuItem name="main" >康康大家肿么样</MenuItem></router-link>
      <router-link to="/write"><MenuItem name="write" >写点什么鸭</MenuItem></router-link>
      <router-link to="/mine"><MenuItem name="mine" >我写了什么</MenuItem></router-link>
      <router-link to="/emotion"><MenuItem name="emotion" >最近心情怎样</MenuItem></router-link>
      <div id="login-button" v-if="!logined">
        <Button @click="login">登陆</Button>
        <Button @click="register">注册</Button>
      </div>
      <login-modal :show_parent="show_login" v-on:loginClosed="loginClosed" :key="timer_login"></login-modal>
      <register-modal :show_parent="show_register" v-on:registerClosed="registerClosed" :key="timer_register"></register-modal>
      <check-in-modal :show_parent="show_check_in" v-on:checkInClosed="checkInClosed" :key="timer_check_in"></check-in-modal>
      <Submenu name="me" id="me" v-if="logined">
        <template slot="title">{{nickname}}</template>
        <router-link to="/me"><MenuItem name="4-1">我</MenuItem></router-link>
        <MenuItem  @click.native="checkIn" name="4-2">
          <span>签到</span>
        </MenuItem>
        <MenuItem  @click.native="logout" name="4-3">
          <span>登出</span>
        </MenuItem>
      </Submenu>
    </Menu>
  </div>
</template>
<script>
import LoginModal from "./LoginModal.vue";
import RegisterModal from "./RegisterModal.vue";
import CheckInModal from "./CheckInModal.vue";
import Write from "../pages/Write"
export default {
  name: "NavigationBar",
  components: { "login-modal": LoginModal,
                "register-modal":RegisterModal,
                "check-in-modal":CheckInModal
  },
  data() {
    return {
      theme1: "light",
      value: "",
      show_login: false,
      show_register:false,
      show_check_in:false,
      logined: false,
      timer_login: "",
      timer_register:"1",
      timer_check_in:"3",
      nickname: "123"
    };
  },
  created: function() {
    this.$api.get("login/", {}, response => {
      if (response.status == 200) {
        var data = response.data;
        if (data.err_code==0 && data.data.result == true) {
          this.logined = true;
          this.nickname = data.data.nickname;
          this.$Message.success(this.nickname+",欢迎回来");
        }
      }
    });
  },
  methods: {
    login() {
      this.timer_login = new Date().getTime();
      this.show_login = true;
    },
    checkIn(){
      console.log("签到")
      this.timer_check_in = new Date().getTime();
      this.show_check_in = true;
    },
    register() {
      this.timer_register = new Date().getTime();
      this.show_register = true;
    },
    loginClosed(params) {
      var login_status = params.logined;
      if (login_status == true) {
        this.nickname = params.data.nickname;
        this.logined = true;
      } else {
        this.show_login = false;
        this.logined = false;
      }
     
    },
    registerClosed(params) {
      var register_status = params.registered;
      if (register_status == true) {
         this.show_register = false;
         this.login();
      } else {
        this.show_register = false;
      }
    },
    checkInClosed() {
      this.show_check_in=false;
      },
    logout() {
      localStorage.removeItem('ckeditor_content');
      this.$api.get("logout/", {}, response => {
        if (response.status != 200) {
          this.$Message.error("操作失败，服务器错误");
          this.$Message.error("" + response);
        } else {
          var data = response.data;
          if (data.data.result == true) {
            this.logined = false;
            this.$Message.success("操作成功");
          }
        }
      });
    }
  }
};
</script>
<style scoped>
#login-button {
  position: absolute;
  right: 5%;
}
#me {
  position: absolute;
  right: 5%;
}
</style>